<template>
    <div>
        <div>attrs:{{ attrs }}</div>
        <div v-bind="$attrs">父组件传输的值:{{ withProps.msg }}==={{ withProps.age }}</div>
        <button @click="sonfunHandle">子组件测试ctx的emit事件</button>
        <slot name="under-button"></slot>
    </div>

</template>

<script setup lang="ts">
import { useSlots, defineProps, withDefaults, useAttrs } from 'vue'
type HomePropsPerson = {
    [p in 'msg' | 'age']: string
}

const emits = defineEmits(['change-in-child'])


const withProps = withDefaults(defineProps<HomePropsPerson>(), {
    msg: 'hello',
    age: '18',
})

const sonfunHandle = () => {
    emits('change-in-child', 'value from child')
}
console.log('withProps', withProps,)

// ------useSlots---------
// console.log('useSlots()', useSlots()['under-button']!()[0]!.children)
console.log('useSlots()', useSlots())
// 获取的是父组件填充子组件插槽的内容。此处是父组件模板的内容
console.log('useSlots()', useSlots()['under-button']()![0]!.children)
console.log('useSlots()', useSlots()['under-test']()![0]!.children)

// ------useAttrs---------
const attrs = useAttrs()

</script>
